/*
* @Author: Choisaaaa
* @Date: 2018/5/5  19:42
* Jsx的逻辑处理：（在表达式中引用变量，三元运算符的用法，数组的遍历）
*/

import React from  "react";
import ReactDOM from 'react-dom';

let name = "Mark";//引用变量
let flag = true;//条件判断
let names = ["Mark1","Mark2","Mark3"];//数组的循环输出

let Jsx = <div >I am {name}</div>//应用一个变量 ：使用花括号{}

let Jsx2 = (  //讲HTML用()为了防止解析出错
    <div >
        {/* 在Jsx中应用条件判断三元表达式 */}
        {
            flag
                ? <div >I am {name}</div>
                : <div >I am not {name}</div>
        }
    </div>);

let Jsx3 = (
    <div>
        {/* 遍历数组 */}
        {
            names.map((name,index)=>{
                return(
                    <p key={index}> I am {name}</p>//这里需要添加key属性否则会浏览器上会有警告
                )
            })
        }
    </div>
);

let Jsx4 = (
    <div>
        {/* 遍历数组第二种形式 如果是调用箭头函数需要 将结果return回去 */}
        {
            names.map((name,index)=> <p key={index}>I am {name}</p>)
        }
    </div>
);

ReactDOM.render(
    Jsx2,
    document.getElementById("Study")
);